<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>酒店预订系统</title>
        <link rel="icon" th:href="@{/static/favicon.ico}" />
        <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/index.css}" />
        <link rel="stylesheet" th:href="@{/static/admin/css/user_index.css}" />
        <script th:src="@{/static/js/vue.min.js}"></script>
        <script th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
        <script th:src="@{/static/bootstrap/js/bootstrap.bundle.js}"></script>
        <script th:src="@{/static/admin/js/script.js}"></script>
        <script th:src="@{/static/admin/js/config.js}"></script>
    </head>
    <body>
        <div id="App" class="d-flex" style="height: 100%">
            <nav>
                <div class="logo">
                    <h4>酒店预订系统</h4>
                </div>
                <ul class="menu" th:object="${session.user}">
                    <li class="unwind">
                        <a th:href="@{/main}" target="main" class="active"><i class="iconfont mr-1">&#xe6a2;</i>首页</a>
                    </li>
                    <li class="unwind">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe693;</i>个人信息<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/user/personal/modify}" target="main">修改个人信息</a></li>
                            <li><a th:href="@{/user/upload}" target="main">更换头像</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Admin'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe6e0;</i>用户管理<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/user/crud?option=uid&value=}" target="main">用户列表</a></li>
                            <li><a th:href="@{/user/create}" target="main">添加用户</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Admin'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe663;</i>酒店管理<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/hotel/crud?option=hotel_name&value=}" target="main">酒店列表</a></li>
                            <li><a th:href="@{/applicate/index?option=hotel_name&value=}" target="main">酒店申请处理</a></li>
                            <li><a th:href="@{/hotel/registeration/pending}" target="main">酒店注册处理</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Admin'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe6a3;</i>历史记录<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/hotel/registeration/history}" target="main">酒店注册历史</a></li>
                            <li><a th:href="@{/applicate/history/admin?option=hotel_name&value=}" target="main">酒店申请历史</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Manager'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe663;</i>酒店管理<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{'/hotel/crud?option=manager_id&value='+*{uid}}" target="main">我的酒店</a></li>
                            <li><a th:href="@{/applicate/history/manager?option=hotel_name&value=}" target="main">酒店申请</a></li>
                            <li><a th:href="@{/hotel/registeration}" target="main">注册酒店</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Manager'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe69d;</i>预订管理<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/room/reservation/pending}" target="main">订房申请处理</a></li>
                            <li><a th:href="@{/room/reservation/history}" target="main">历史预订记录</a></li>
                        </ul>
                    </li>
                    <li class="unwind" th:if="*{level == 'Guest'}">
                        <a class="top-menu" href="javascript:;"><i class="iconfont mr-1">&#xe68e;</i>酒店预订<i class="iconfont arrow float-right">&#xe66c;</i></a>
                        <ul class="sub-menu">
                            <li><a th:href="@{/hotel/display?option=address&value=}" target="main">查看酒店</a></li>
                            <li><a th:href="@{/room/reservation/history}" target="main">历史预订记录</a></li>
                        </ul>
                    </li>
                    <li class="unwind">
                        <a th:href="@{/user/logout}"><i class="iconfont mr-1">&#xe68c;</i>退出登录</a>
                        <!-- <a id="logout" href="javascript:;"><i class="iconfont mr-1">&#xe68c;</i>退出登录</a> -->
                    </li>
                </ul>
            </nav>

            <main>
                <header>
                    <span>身份认证：<b th:text="${session.user.level == 'Admin' ? '管理员' : session.user.level == 'Guest' ? '客户' : '经营者'}">管理员</b></span>

                    <div class="dropdown float-right">
                        <button style="padding: 0 10px" class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg width="32" height="32" viewBox="0 0 16 16" class="rounded-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c.552 0 1-.672 1-1.5S10.552 5 10 5s-1 .672-1 1.5S9.448 8 10 8z" /></svg>
                            <span style="margin: 0 5px" th:text="${session.user.username}">Admin</span>
                        </button>

                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
                            <a id="repwd" class="dropdown-item" href="javascript:;">修改密码</a>
                            <a class="dropdown-item" th:href="@{/user/logout}">退出登录</a>
                        </div>
                    </div>
                </header>

                <iframe th:src="@{/main}" name="main"></iframe>
            </main>
            <div class="mask"></div>
            <div class="frame register" style="width: 350px">
                <div class="header">
                    <h2>修改密码</h2>
                </div>
                <div class="frame-body">
                    <div class="form-group">
                        <input type="password" class="form-control" v-model="pwd" placeholder="请输入旧密码" />
                        <small class="form-text text-muted"></small>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" v-model="pwd1" placeholder="请输入新密码" />
                        <small class="form-text text-muted"></small>
                    </div>
                    <div class="form-group" style="margin-bottom: 0">
                        <input type="password" class="form-control" v-model="pwd2" placeholder="请再次输入新密码" />
                    </div>
                </div>
                <div class="footer">
                    <input type="button" id="cancel" class="btn btn-primary" value="取消" />
                    <input type="submit" id="submit" class="btn btn-primary" value="提交" @click="submitData" />
                </div>
            </div>
        </div>

        <!-- <script th:inline="javascript">
            $("#logout").click(function () {
                var form = $("<form>", {method: "POST", action: "/user/logout"});
                form.append(
                    $("<input>", {
                        type: "hidden",
                        name: /*[[${_csrf.parameterName}]]*/ "_csrf",
                        value: /*[[${_csrf.token}]]*/ null,
                    })
                );
                $("body").append(form);
                form.submit();
            });
        </script> -->
        <script>
            var vue = new Vue({
                el: ".frame",
                data: {
                    pwd: "",
                    pwd1: "",
                    pwd2: "",
                },
                methods: {
                    submitData() {
                        if (this.pwd == "" || this.pwd1 == "" || this.pwd2 == "") {
                            alert("密码不能为空!");
                            return;
                        }
                        if (this.pwd1 != this.pwd2) {
                            alert("两次输入的密码不一致");
                            return;
                        }
                        disappear($(".mask"), $(".frame"));
                        setTimeout(() => {
                            $.ajax({
                                url: "/user/repwd",
                                type: "put",
                                contentType: "application/json",
                                data: JSON.stringify({
                                    oldPwd: this.pwd,
                                    newPwd: this.pwd1,
                                }),
                                success: function (data) {
                                    if (data == "success") {
                                        commonUtil.message("密码修改成功，请重新登录！", "success");
                                        setTimeout(() => {
                                            window.location.href = "/user/logout";
                                        }, 1100);
                                    } else {
                                        commonUtil.message("输入的旧密码错误！", "danger");
                                    }
                                },
                                error: function (data) {
                                    alert("error: " + data.responseText);
                                },
                            });
                        }, 400);
                    },
                },
            });

            $("#repwd").click(function () {
                vue.pwd = "";
                vue.pwd1 = "";
                vue.pwd2 = "";
                appear($(".mask"), $(".frame"));
            });

            $("#cancel").click(function () {
                disappear($(".mask"), $(".frame"));
            });
        </script>
    </body>
</html>
